<template>
  <view class="home">
    <headerss title='分享码'></headerss>

    <!--  -->
    <view class="content">
      <image src="../../static/imgs/Frame15.png" mode=""></image>

      <view class="code">
        <view class="code_top">
          <view style="margin-bottom: 10rpx;">邀您加入</view>
          <view class="">一起拍摄出最美的自己</view>
          <image src="https://img2.baidu.com/it/u=2020520018,1139302565&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
            mode=""></image>
        </view>
      </view>

      <view class=" user">
        <view class="avatar">
          <text>头像：</text>
          <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
        </view>
        <view class="">
          <text>用户名：</text>
          <text>Auraro</text>
        </view>
      </view>
    </view>

    <button class="save">保存海报</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    background-color: #fff;
    height: 1624rpx;
  }

  .content {
    position: relative;
    margin: 116rpx 32rpx 0;

    >image {
      width: 688rpx;
      height: 986rpx;
    }

    .code {
      position: absolute;
      top: 94rpx;
      left: 20%;

      .code_top {
        text-align: center;
        font-size: 40rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #F86C4E;

        >image {
          z-index: 999;
          margin-top: 75rpx;
          margin-left: 25rpx;
          width: 342rpx;
          height: 342rpx;
        }
      }
    }

    .user {
      position: absolute;
      bottom: 40rpx;
      left: 70rpx;

      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;

      .avatar {
        margin-bottom: 16rpx;

        >image {
          vertical-align: middle;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
        }
      }
    }

  }

  .save {
    margin-top: 50rpx;
    width: 686rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(90deg, #FF957B 0%, #FF4450 100%);
    border-radius: 58rpx 58rpx 58rpx 58rpx;

    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
  }
</style>